<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'客评'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137" v-loading='loading'>
        <div class="analyItem" v-if="qualityList !== null">
            <p class="analyItemTit tx-center" :title="qualityList.processChildName">{{qualityList.processChildName | slice(0,4)}}</p>
            <div class="analyItemCon">
                <div class="flex">
                    <div class="fl">
                        <rx-viewer style="position:relative">
                            <div class="clearfix tx-center">
                                <div class="mr10">
                                    <img :src="qualityList.processImg | smallImg(80, 80)">
                                    <span class="standardImg">标</span>
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <div class="col-md-8">
                        <p><span class="cLightGray pr8">{{qualityList.processAcceptance}}</span></p>
                    </div>
                    <span class="roleFixed" @click="stepShow = !stepShow">查看步骤</span>
                </div>
           </div>
        </div>
        <div v-else>
            <div class="analyItem" v-if="qualityList !== null">
                <p class="analyItemTit tx-center" >工艺详情</p>
                <div class="analyItemCon">
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
        <div v-if="stepShow">
            <div class="analyItem" v-for="(item, index) in workOrderCraftStep" :key="index">
                <p class="analyItemTit tx-center">步骤{{index + 1}}</p>
                <div class="analyItemCon">
                    <div class="flex">
                        <div class="fl">
                            <rx-viewer style="position:relative">
                                <div class="clearfix tx-center">
                                    <div class="mr10">
                                        <img :src="item.stepImg | smallImg(80, 80)">
                                    </div>
                                </div>
                            </rx-viewer>
                        </div>
                        <div class="fl col-md-9">
                            <div class="col-md-12">
                                <p><span class="cLightGray pr8">{{item.stepName}}</span></p>
                            </div>
                            <p class="col-md-12">
                                <span class="cLightGray pr8">{{item.stepContent }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">工人信息</p>
            <div class="analyItemCon">
                <div v-if="workOrderChildUser !== null">
                    <div class="col-md-12 pr10" >
                        <p class="col-md-4">
                            <span class="cLightGray pr8">工人名称</span>
                            <span class="UserLevel">{{workOrderChildUser.workerName === null ? '暂无' :workOrderChildUser.workerName }}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">工人编号</span>
                            <span class="UserLevel">{{workOrderChildUser.workerId === null ? '暂无' :workOrderChildUser.workerId}}</span>
                        </p>
                         <p class="col-md-4">
                            <span class="cLightGray pr8">工人手机号</span>
                            <span class="UserLevel">{{workOrderChildUser.mobile === null ? '暂无' :workOrderChildUser.mobile}}</span>
                        </p>
                    </div>
                </div>
                <div v-else>
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
         <div class="analyItem">
            <p class="analyItemTit tx-center">工传</p>
            <div class="analyItemCon">
                <div v-if="auditWorkOrderCraftTask !== null">
                    <div class="col-md-12 pr10">
                        <rx-viewer style="position:relative" v-for="(item,index) in workerUpLoadPhotoList" :key="index">
                            <div class="clearfix tx-center fl">
                                <div class="mr10">
                                    <img :src="item | smallImg(80, 80)">
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <div class='col-md-12'>
                        <p><span class="cLightGray pr8">描述</span><span>{{workerUploadContent}}</span></p>
                    </div>
                    <span class="cGreen stageRight">{{auditWorkOrderCraftTask.taskState === 1 ? '待审核' : '审批通过'}}</span>
                </div>
                <div v-else>
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">项验</p>
            <div class="analyItemCon">
                <div v-if="auditWorkOrderCraftTask !== null">
                    <div class="col-md-2 pr10" style="" v-for="(item,index) in auditWorkOrderCraftTask.auditPhotoList " :key="index" >
                        <rx-viewer style="position:relative">
                            <div class="clearfix tx-center">
                                <div class="mr10">
                                    <img :src="item | smallImg(80, 80)">
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <div class='col-md-12'>
                        <p><span class="cLightGray pr8">描述</span><span>{{auditWorkOrderCraftTask.auditContent }}</span></p>
                    </div>
                </div>
                <div v-else>
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
        <div v-if="workOrderCraftTask.length === 0">
            <div class="analyItem">
                <p class="analyItemTit tx-center">返工信息</p>
                <div class="analyItemCon">
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
        <div class="analyItem" v-for="(item, index) in workOrderCraftTask" :key="index">
            <p class="analyItemTit tx-center">返工{{index + 1}}</p>
            <div class="analyItemCon">
               <div class="col-md-12 pr10">
                    <span class="pr10 fl">工传图</span>
                    <rx-viewer style="position:relative fl" v-for="(itemImg,index) in item.upLoadPhotoList" :key="index">
                        <div class="clearfix tx-center fl">
                            <div class="mr10">
                                <img :src="itemImg | smallImg(80, 80)">
                            </div>
                        </div>
                    </rx-viewer>
                </div>
                <div class="col-md-12">
                    <p>
                        <span class="pr10">工传描述</span>
                        <span class="cLightGray pr8">{{item.uploadContent}}</span>
                    </p>
                </div>
                <div class="col-md-12 pr10">
                    <span class="pr10">返工图</span>
                    <rx-viewer style="position:relative" v-for="(itemImg,index) in item.auditPhotoList" :key="index">
                        <div class="clearfix tx-center">
                            <div class="mr10 fl">
                                <img :src="itemImg | smallImg(80, 80)">
                            </div>
                        </div>
                    </rx-viewer>
                </div>
                <div class="col-md-12">
                    <p>
                        <span class="pr10">返工描述</span>
                        <span class="cLightGray pr8">{{item.auditContent}}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">客评</p>
            <div class="analyItemCon">
                <div v-if="workOrderCraftEvaluate === null">
                    <el-rate v-model="evaluateStar" :allow-half='allow'></el-rate>
                    <div class="pt10" >
                        <textarea style="width: 100%;" v-model="evaluateContent"></textarea>
                    </div>
                </div>
                <div v-else>
                    <el-rate v-model="evaluateStar" :allow-half='allow' disabled></el-rate>
                    <div class="pt10" >
                        <textarea style="width: 100%;" v-model="evaluateContent" readonly></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="tx-center">
                    <input type="button" class="uiBtn-normal uiBtn-blue" value="确定" @click="submitData()" v-if="orderstage === 4">
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getWorkOrderCraftDetail, saveWorkOrderCraftEvaluate } from '../../Resources/Api/index'
export default {
    data () {
        return {
            loading: true,
            qualityList: null, // 工艺详情
            fourIndex: undefined,
            processCode: '', // 工艺编号
            workOrderChildUser: null, // 工人信息
            workOrderCraftStep: [], // 工艺步骤
            workOrderCraftTask: [], // 返工信息
            auditWorkOrderCraftTask: null, // 项经和工人上传信息
            workOrderCraftEvaluate: null, // 客户评价
            workerUploadContent: '', // 工人上传描述
            workerUpLoadPhotoList: [], // 工人上传图片
            stepShow: false, // 步骤是否显示
            evaluateStar: null, // 评价星星
            evaluateContent: '', // 评价内容
            orderstage: 0, // 订单状态
            allow: true // 是否半选
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo', 'updatePlate'])
    },
    mounted () {
        this.processCode = this.$route.query.processCode
        this.orderstage = this.$route.query.stage
        this.getWorkOrderCraftDetail()
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 获取工艺详情数据
        getWorkOrderCraftDetail () {
            let parms = {
                orderNo: this.leftInfo.orderno,
                processCode: this.processCode
            }
            getWorkOrderCraftDetail(parms).then((result) => {
                if (result.data.StatusCode === 1) {
                    this.qualityList = result.data.Body.workOrderChildCraft // 工艺信息
                    this.workOrderCraftStep = result.data.Body.workOrderCraftStep // 步骤
                    this.workOrderChildUser = result.data.Body.workOrderCraftUser // 工人信息
                    this.workerUploadContent = result.data.Body.auditWorkOrderCraftTask.uploadContent // 工人描述
                    this.workerUpLoadPhotoList = result.data.Body.auditWorkOrderCraftTask.upLoadPhotoList // 工人上传图片
                    this.auditWorkOrderCraftTask = result.data.Body.auditWorkOrderCraftTask // 项目经理和工人信息
                    this.workOrderCraftTask = result.data.Body.workOrderCraftTask // 返工数据
                    this.workOrderCraftEvaluate = result.data.Body.workOrderCraftEvaluate // 评价
                    if (this.workOrderCraftEvaluate !== null) {
                        this.evaluateStar = this.workOrderCraftEvaluate.evalStar !== null ? (this.workOrderCraftEvaluate.evalStar / 2) : 0
                        this.evaluateContent = this.workOrderCraftEvaluate.evalContent !== null ? this.workOrderCraftEvaluate.evalContent : '暂无数据'
                    }
                    this.loading = false
                }
            }).catch((error) => {
                this.loading = false
                console.log(error)
            })
        },
        // 提交评价
        submitData () {
            let parms = {
                orderNo: this.leftInfo.orderno,
                processCode: this.processCode,
                evaluateContent: this.evaluateContent,
                evaluateType: 2,
                evaluateStar: this.evaluateStar * 2,
                createUserName: this.userInfo.as_fullName
            }
            saveWorkOrderCraftEvaluate(parms).then(res => {
                if (res.data.StatusCode === 1) {
                    this.setUpDatePlate()
                    this.$message('评价提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log(err)
            })
        }
    },
    watch: {
        $route () {
            this.processCode = this.$route.query.processCode
            this.orderstage = this.$route.query.stage
            this.loading = true
            this.qualityList = null // 工艺详情
            this.workOrderChildUser = null // 工人信息
            this.workOrderCraftStep = [] // 工艺步骤
            this.workOrderCraftTask = [] // 返工信息
            this.auditWorkOrderCraftTask = null // 项经和工人上传信息
            this.workOrderCraftEvaluate = null // 客户评价
            this.workerUploadContent = '' // 工人上传描述
            this.workerUpLoadPhotoList = [] // 工人上传图片
            this.stepShow = false // 步骤是否显示
            this.evaluateStar = null // 评价星星
            this.evaluateContent = '' // 评价内容
            this.getWorkOrderCraftDetail()
        },
        leftInfo () {
            this.processCode = this.$route.query.processCode
            this.orderstage = this.$route.query.stage
            this.loading = true
            this.qualityList = null // 工艺详情
            this.workOrderChildUser = null // 工人信息
            this.workOrderCraftStep = [] // 工艺步骤
            this.workOrderCraftTask = [] // 返工信息
            this.auditWorkOrderCraftTask = null // 项经和工人上传信息
            this.workOrderCraftEvaluate = null // 客户评价
            this.workerUploadContent = '' // 工人上传描述
            this.workerUpLoadPhotoList = [] // 工人上传图片
            this.stepShow = false // 步骤是否显示
            this.evaluateStar = null // 评价星星
            this.evaluateContent = '' // 评价内容
            this.getWorkOrderCraftDetail()
        }
    }
}
</script>
<style lang="scss">
    .flex {
        display: flex;
        align-items: center;
    }
    .standardImg {
        width: 28px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        position: absolute;
        top: 1px;
        left: 1px;
        background: #000;
        opacity: 0.6;
        color: #fff;
        border-radius: 5px;
        padding: 0 1px;
    }
    .roleFixed,
    .stageRight {
        position: absolute;
        right: 30px;
        top: 5px;
        font-family: Tahoma,Helvetica,Arial;
        font-size: 12px;
        color: #09f;
        letter-spacing: 2px;
        cursor: pointer;
    }
    .stageRight {
        color: #3c6;
        top: 35px;
    }
</style>
